<template>
  <view>
    <view
        style="width: 100%; z-index: 999"
        :style="{
        background: isNeedBgColor ? bgColor : '',
        position: fixed == 'none' ? 'none' : 'fixed',
      }"
    >
      <!-- 这里是状态栏-->
      <view class="status_bar" :style="{ height: h1 + 'px' }"></view>

      <!-- 首页样式： 左边logo 中间搜索框 -->
      <view class="title-search-bar main-page" :style="{ color: textColor }" v-if="isMain">
        <!-- <view v-if="[3].includes(getMemberInfo.status)" class="settle-in" @click="settleIn">
          <img :src="`https://staticcdn.youliao.com/static/image/yl_app/guide/settleIn${num}.png`" alt="" />
        </view> -->
        <image class="yl-icon" src="https://staticcdn.youliao.com/static/image/www_m/common/logo_white.png" style="width: 114rpx; height: 52rpx" />
        <view class="nh-search" @tap="gotoSearch">
          <image class="img" src="https://staticcdn.youliao.com/static/image/www_m/common/icon_search_w.png" />
          <text class="c-cff font-size-12">搜索商品名/品牌/货号/店铺</text>
        </view>
      </view>
      <!-- 商品详情样式： 中间一个搜索框 -->
      <view class="title-search-bar second-page" :style="{ color: searchBgColor.iconColor }" v-else-if="isSecondPage">
        <van-icon class="back-icon" name="arrow-left" size="24" v-if="isReturn" @click="back" style="width: 96rpx; height: 52rpx" />
        <van-icon class="home-icon" name="wap-home-o" size="24" v-if="goHome" @click="home" style="width: 96rpx; height: 52rpx" />
        <view class="'second-page-search" :style="{ background: searchBgColor.bgColor }" @click="gotoSearch">
          <image class="search-icon" :src="searchBgColor.iconUrl" mode="widthFix" />
          <text class="search-txt" :style="{ color: searchBgColor.textColor }">搜索商品名/品牌/货号</text>
        </view>
      </view>
      <!-- 仅中间一个白色logo 或者 标题，可传入logo图片路径 -->
      <view class="titlebarbar other-page" :style="{ color: textColor, background: isNeedBgColor ? bgColor : '' }" v-else>
        <van-icon class="back-icon" name="arrow-left" size="24" v-if="isReturn" @click="back" />
        <van-icon class="home-icon" name="wap-home-o" size="24" v-if="goHome" @click="home" />
        <image :src="titleLogo" style="width: 114rpx; height: 52rpx" v-if="!title" />
        <text class="w_title" v-else>{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      value: "",
      h1: uni.getSystemInfoSync().statusBarHeight,
      h2: 0,
      flag: 0,
      num: 0,
    };
  },
  created() {
    const $h = uni.getSystemInfoSync();
    // console.log($h,"???height");
    // console.log($h.statusBarHeight,12341234)
    const res = uni.getMenuButtonBoundingClientRect();
    this.h1 = $h.statusBarHeight;
    this.h2 = res.top;
    setInterval(() => {
      this.flag++;
      this.flag % 2 === 0 ? (this.num = 2) : (this.num = 1);
    }, 500);
  },
  name: "wtitleBar",
  props: {
    // 标题栏是否固定 可选值fixed 固定 none不固定
    fixed: {
      type: String,
      default: "fixed",
    },
    // 是否二级页面
    isSecondPage: {
      type: [Boolean, String],
      default: false,
    },
    // 返回按钮的颜色  0是白色 1是黑色
    returnColor: {
      type: Number,
      default: 0,
    },
    // 标题名称
    title: {
      type: String,
      default: "",
    },
    // 标题LOGO，仅当设置一个文本或者LOGO作为页面标题时生效
    titleLogo: {
      type: String,
      default: "https://staticcdn.youliao.com/static/image/www_m/common/logo_white.png",
    },

    // 文字颜色 默认白色
    textColor: {
      type: String,
      default: "#fff",
    },
    // 背景颜色  默认橙色渐变
    bgColor: {
      type: String,
      default: "linear-gradient(134deg, #F88C34 0%, #ED572A 100%);",
    },
    // 是否需要背景色
    isNeedBgColor: {
      type: Boolean,
      default: true,
    },
    // 是否显示返回上一页 注意：如果是起始页设置为false即可。 默认不显示
    isReturn: {
      type: [Boolean, String],
      default: false,
    },
    // 是否显示返回首页
    goHome: {
      type: [Boolean, String],
      default: false,
    },
    // 文字显示方式 默认左对齐
    textAlign: {
      type: String,
      default: "left",
    },
    // 是否跑出返回事件
    backExport: {
      type: [Boolean, String],
      default: false,
    },
    // 是否为首页
    isMain: {
      type: Boolean,
      default: false,
    },
    // 搜索框颜色 grey white
    searchColor: {
      type: String,
      default: "grey",
    },
    // 是否抛出搜索事件
    hasSearchEvent: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapState(["getMemberInfo"]),
    searchBgColor() {
      if (this.searchColor === "white") {
        return {
          bgColor: "rgba(255, 255, 255, 0.15)",
          iconColor: this.searchColor,
          iconUrl: "https://staticcdn.youliao.com/static/image/www_m/common/icon_search_w.png",
          textColor: this.searchColor,
        };
      }
      return {
        bgColor: "rgba(36, 45, 74, 0.06)",
        iconColor: "#000",
        iconUrl: "https://staticcdn.youliao.com/static/image/www_m/common/icon_search_g.png",
        textColor: "#8c8c8c",
      };
    },
  },

  methods: {
    // 去入驻
    settleIn() {
      this.$emit("settleIn");
      // uni.navigateTo({
      //   url: '/pages-shop/merchantEnter/home',
      // });
    },
    back() {
      if (this.backExport) {
        this.$emit("back");
      } else {
        uni.navigateBack();
      }
    },
    home() {
      console.log("gohome");
      uni.switchTab({
        url: "/pages/index/main",
      });
    },
    gotoSearch() {
      console.log("搜索", this.hasSearchEvent);
      if (this.hasSearchEvent) return this.$emit("search");
      this.$store.commit("setIsSample", 0);
      uni.navigateTo({
        url: "/pages-shop/search/search",
      });
    },
  },
};
</script>

<style lang="scss">
@import "../../static/newCommon.scss";
.settle-in {
  width: 114rpx;
  height: 64rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.titlebarbar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  .back-icon {
    position: absolute;
    left: 4rpx;
  }
  .home-icon {
    position: absolute;
    left: 32rpx;
  }
  .search-input {
    height: 60rpx;
    width: 340rpx;
    background-color: #fff;
    border-radius: 30rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    color: #c7c7cd;
    padding-left: 20rpx;
  }
}
.titlebarbar {
  z-index: 1000;
  padding: 0 20rpx;
  .image {
    padding-right: 20rpx;
  }
}
.titlebarbar image {
  width: 46rpx;
  height: 46rpx;
  z-index: 9999;
}
.textLeft {
  text-align: left;
}
.textCenter {
  text-align: center;
  margin-left: -64rpx !important;
}
.w_title {
  font-size: 32rpx;
  color: #fff;
}
.title-search-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 88rpx;
  font-size: 28rpx;
  justify-content: flex-start;
  align-items: center;

  .yl-icon {
    @extend .ml-9;
    // @extend .mb-6;
  }
  .nh-search {
    height: 64rpx;
    width: 392rpx;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 36rpx;
    display: flex;
    @extend .ml-8;
    // @extend .mr-17;
    // @extend .mb-4;
    @extend .flex-left;
    .img {
      width: 24rpx;
      height: 24rpx;
      margin: 0 12rpx 0 30rpx;
    }
  }
  .secondPageSearch {
    height: 64rpx;
    width: 440rpx;
    display: flex;
    @extend .flex-left;
    position: relative;
    .second-img {
      width: 100%;
      height: 64rpx;
    }
    .search-txt {
      position: absolute;
      left: 64rpx;
      line-height: 64rpx;
      color: #8c8c8c;
    }
  }
}

.white-search {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 36rpx;
  &-icon {
    position: absolute;
    left: 30rpx;
    width: 24rpx;
  }
}

.second-page-search {
  display: flex;
  align-items: center;
  height: 64rpx;
  width: 440rpx;
  border-radius: 36rpx;

  .search-icon {
    width: 24rpx;
    margin: 0 12rpx 0 30rpx;
  }
}
</style>
